<template>
    <div>
        <el-container>
            <el-aside width="200px">
                <el-button @click="dialogFormVisible = true" round>添加</el-button>
                <el-button @click="dialogFormVisi = true" round>修改</el-button>
                <el-button @click="dialogFormV = true" round>删除</el-button>
                <div>
                    <el-dialog title="添加数据字典" :visible.sync="dialogFormVisible">
                        <el-form :model="form">
                            <el-form-item label="名称">
                                <el-input v-model="form.dictName" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="代码">
                                <el-input v-model="form.dictCode" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="Add">确 定</el-button>
                        </div>
                    </el-dialog>
                </div>
                <div>
                    <el-dialog title="修改数据字典" :visible.sync="dialogFormVisi">
                        <el-form :model="table">
                            <el-form-item label="选择要修改的内容">
                                <el-select v-model="table.dictid" placeholder="请选择要修改的内容">
                                    <el-option v-for="tt in data" :key="tt.dictId" :label="tt.dictName" :value="tt.dictId"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="名称">
                                <el-input v-model="table.dictName" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="代码">
                                <el-input v-model="table.dictCode" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="@click=dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="upAdd">确 定</el-button>
                        </div>
                    </el-dialog>
                </div>
                <div>
                    <el-dialog title="删除数据字典" :visible.sync="dialogFormV">
                        <el-form :model="rr">
                            <el-form-item label="选择要删除的内容">
                                <el-select v-model="ids" placeholder="请选择要删除的内容">
                                    <el-option v-for="tt in data" :key="tt.dictId" :label="tt.dictName" :value="tt.dictId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="dlAdd">确 定</el-button>
                        </div>
                    </el-dialog>
                </div>

                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </el-aside>
            <el-main>
                <template>
                    <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" width="55"> </el-table-column>
                        <el-table-column label="名称" width="120">
                            <template slot-scope="scope">{{ scope.row.detailsName }}</template>
                        </el-table-column>
                        <el-table-column prop="detailsCreateUser" label="创建人" width="120"> </el-table-column>
                        <el-table-column prop="detailsUpdateUser" label="修改人" show-overflow-tooltip> </el-table-column>
                        <el-table-column fixed="right" label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                                <el-button type="text" size="small">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import { DictShow, DictDetails, DictAdd, Dictupdate, Dictdelete } from '@/api/dict';
export default {
    data() {
        return {
            dialogFormVisible: false,
            dialogFormVisi: false,
            dialogFormV: false,
            rr: {
                ids: 0
            },

            formm: {},
            table: {
                dictid: 0,
                dictName: 'string',
                dictUpdateUser: 'string',
                dictUpdateTime: '2022-08-29T12:24:12.314Z',
                dictState: 0,
                dictCode: 'string'
            },
            form: {
                dictId: 0,
                dictName: '',
                dictCreateUser: '詹桑',
                dictCreateTime: '2022-08-29T04:45:29.639Z',
                dictUpdateUser: '詹桑',
                dictUpdateTime: '2022-08-29T04:45:29.640Z',
                dictState: 1,
                dictCode: '',
                dictFId: 0,
                dlist: [null]
            },
            id: 0,
            dang: 1,
            size: 3,
            name: '',
            data: [],
            tableData: [],
            defaultProps: {
                children: 'dictId',
                label: 'dictName',
                value: 'dictId'
            },
            ids:undefined,
        };
    },
    mounted() {
        this.First();
    },
    methods: {
        handleClick(row) {
            console.log(row);
        },
        Add() {
        
            DictAdd(this.form).then((d) => {
               
                alert(d.mag);
                this.show();
           this.dialogFormVisible = false;        
            });   
        },
        upAdd() {
            Dictupdate(this.table).then((d) => {
               
                alert(d.mag); 
                 this.dialogFormVisi = false;
            this.show();
            });
          
        },
        dlAdd() {
       
            Dictdelete(this.ids).then((d) => {
              
                alert('删除成功'); 
                this.dialogFormV = false;
            this.show();
            });
           
        },

        toggleSelection(rows) {
            if (rows) {
                rows.forEach((row) => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        async dictshow() {
            await DictDetails(this.dang, this.id, this.size, this.name).then((d) => {
                console.log(d);
                this.tableData = d.data;
                this.DCount = d.count;
                console.log(this.tableData);
            });
        }, 
        async First(){
          await this.show();
          await this.dictshow();
        },
        async show() {
          
            await DictShow().then((d) => {
                this.data = d.data;
               
            });
        },
        handleNodeClick(data) {
            console.log(data);
            this.id = data.dictId;
            this.dictshow();
        }
    }
};
</script>
